---
title: Remover en listas
description: Una guía de como usar Fluid DnD para remover elemntos en una lista.
---

import ListWithRemove from "@/components/svelte/ListWithRemove.svelte";
import { Code } from "@astrojs/starlight/components";

### Ejemplo de lista de números

Para mostrar como usar **Fluid DnD** para remover elementos de un lista.
Primero, vamos a crear una lista y extraer la función `removeAt` de `useDragAndDrop`:

export const listOfNumbers = `<script setup lang="ts">
import { useDragAndDrop } from "fluid-dnd/svelte";

const list = $state([1, 2, 3, 4, 5]);
const [ parent,_, removeAt ] = useDragAndDrop(list);

</script>`;

export const highlightsListOfNumbers = ["removeAt"];


<Code code={listOfNumbers} lang="svelte" mark={highlightsListOfNumbers} />

### Creando la vista

Después, crearemos la lista con un botón `remove` por cada elemento que llama `removeAt`:

export const highlightsDroppable = ['<button','button>',"removeAt"];

export const listOfNumbersDroppable = `
<ul use:parent class="number-list">
  {#each list as element, index (element)}
    <li class="number" data-index={index}>
      { element }
      <button class="remove-button" onclick={removeAt(index)}>x</button>
    </li>
  {/each}
</ul>
`;

<Code code={listOfNumbersDroppable} lang="svelte" mark={highlightsDroppable} />

### Resultado

<div class="p-8 bg-[var(--sl-color-gray-6)]">
  <ListWithRemove client:load />
</div>

## Añadiendo la clase removing

Tu puedes añadir la clase css que se fija cuando un elemento es removido con el parámetro `removingClass`:

export const listOfNumbersWithRemovingClass = `<script lang="ts">
// ...
const [ parent, removeAt ] = useDragAndDrop(list,{
  removingClass: "removed"
});

</script>`;
export const highlightsRemovingClass = ["removingClass",'removed'];

<Code code={listOfNumbersWithRemovingClass} lang="vue" mark={highlightsRemovingClass}/>

### Cambiando los estilos

Después, añadiremos los estilos `removed` y transiciones cuando la clase es fijada:

export const highlightsStylesRemovingClass = ["removed","transition"];

export const stylesRemovingClass = `
<style scoped>
.number{
  /*
      ...
  */
  opacity: 1;
  transition: opacity 200ms ease;
}
.number.removed{
  opacity: 0;
}
</style>
`;

<Code code={stylesRemovingClass} lang="vue" mark={highlightsStylesRemovingClass} />

### Resultado

<div class="p-8 bg-[var(--sl-color-gray-6)]">
  <ListWithRemove removingClass="removed" client:load  />
</div>

## Añadiendo el tiempo de demora antes de remover

Puedes añadir la cantidad de tiempo en milisegundos antes de remover el elemento (el tiempo por defecto es de 200 milisegundos):

export const listOfNumbersDelay = `<script lang="ts">
// ...
const [ parent, removeAt ] = useDragAndDrop(list,{
  removingClass: "removed",
  delayBeforeRemove: 800
});});

</script>`;
export const highlightsDelay = ["delayBeforeRemove"];

<Code code={listOfNumbersDelay} lang="vue" mark={highlightsDelay}/>

### Resultado

<div class="p-8 bg-[var(--sl-color-gray-6)]">
  <ListWithRemove removingClass="removed" delayBeforeRemove={800} client:load  />
</div>